<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>IFE-Task_15</title>
    </head>
<body>

    <ul id="source">
        <li>北京空气质量：<b>90</b></li>
        <li>上海空气质量：<b>70</b></li>
        <li>天津空气质量：<b>80</b></li>
        <li>广州空气质量：<b>50</b></li>
        <li>深圳空气质量：<b>40</b></li>
        <li>福州空气质量：<b>32</b></li>
        <li>成都空气质量：<b>90</b></li>
    </ul>

    <ul id="resort">
    <!-- 
    <li>第一名：北京空气质量：<b>90</b></li>
    <li>第二名：北京空气质量：<b>90</b></li>
    <li>第三名：北京空气质量：<b>90</b></li>
     -->

    </ul>

    <button id="sort-btn">排序</button>

<script type="text/javascript">

    /**
     * getData方法
     * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
     * 返回一个数组，格式见函数中示例
     */
    var util = ['一','二','三','四','五','六','七','八','九','十'];
    function getData() {
      /*
      coding here
      */
      /*
      data = [
        ["北京", 90],
        ["北京", 90]
        ……
      ]
      */
        var data = new Array();
        var oSource = document.getElementById("source");
        var oLi = oSource.children;
        for(var i = 0; i < oLi.length; i++){
            data[i] = new Array();
            data[i][0] = oLi[i].innerHTML[0]+oLi[i].innerHTML[1];
            data[i][1] = parseInt(oLi[i].children[0].innerHTML);
        }
        return data;

    }
    /**
     * sortAqiData
     * 按空气质量对data进行从小到大的排序
     * 返回一个排序后的数组
     */
    function sortAqiData(data) {
        if(data.length <= 1){
            return data;
        }else{
            var middleNum = Math.floor((data.length)/2),
                middleValue = data.splice(middleNum,1),
                lowArray = [],
                highArray = [];
                //console.log(middleValue);
            for(var i =0; i < data.length; i++){
                if(data[i][1] > middleValue[0][1]){
                    lowArray.push(data[i]);
                }else{
                    highArray.push(data[i]);
                }
            }
        }
        return sortAqiData(lowArray).concat(middleValue,sortAqiData(highArray));
    }
    /**
     * render
     * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
     * 格式见ul中的注释的部分
     */
    function render(data) {
        var oUl = document.getElementById("resort");
        for(i = 0; i < data.length; i++){
            var oLi = document.createElement("li");
            oLi.innerHTML = "第"+util[i]+"名："+data[i][0]+"，"+"<b>"+data[i][1]+"</b>";
            oUl.appendChild(oLi);
        }
    }

    function btnHandle() {
      var aqiData = getData();
      aqiData = sortAqiData(aqiData);
      render(aqiData);
    }


    function init() {
        var btn = document.getElementById("sort-btn");
        btn.onclick = btnHandle;
      // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数

    }

    init();   
</script>
</body>
</html>